<template>
    <el-container class="login" style="height: 100%;">
        <el-header>
            <div style="padding-top: 50px;">
                <img src="../../../assets/img/logo.png" style="width: 95%;max-width: 420px;">
            </div>
        </el-header>
        <el-main style="height: 100%;margin-top: 200px; width: 40%;margin-left: 30%">
            <el-form :model="admin" :rules="rules_login" ref="login_usr" label-width="100px" v-if="isLogin">
                <el-form-item label="帐号" prop="username">
                    <el-input v-model="admin.username"> </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="admin.password"> </el-input>
                </el-form-item>
                <el-form-item style="margin-right: 30px">
                    <el-button type="primary" @click="loginUser('login_usr')">立即登录</el-button>
                    <el-button @click="changeRegister('login_usr')">注册</el-button>
                </el-form-item>
            </el-form>
            <el-form :model="user" :rules="rules" ref="register_user" label-width="100px" v-if="!isLogin">
                <el-form-item label="帐号" prop="register_username">
                    <el-input v-model="user.username" />
                </el-form-item>
                <el-form-item label="密码" prop="register_password">
                    <el-input type="password" v-model="user.password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="againPassword">
                    <el-input type="againPassword" v-model="user.againPassword"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="name">
                    <el-input type="name" v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input type="mobile" v-model="user.mobile"></el-input>
                </el-form-item>
                <el-form-item label="公司" prop="company">
                    <el-input type="mobile" v-model="user.company" ></el-input>
                </el-form-item>
                <el-form-item style="margin-right: 30px">
                    <el-button type="primary" @click="registerUser('register_user')">立即注册</el-button>
                    <el-button @click="changeRegister('register_user')">返回登录</el-button>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer style="">
            <p>版权所有，保留一切权利！</p>
            <p>Copyright © {{ (new Date()).getFullYear() }} <b>江苏科技大学 张家港校区/苏州理工学院</b></p>
        </el-footer>
    </el-container>
</template>

<script>
    import  jwt_decode from 'jwt-decode';
export default {
        name: 'login',
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                admin: {
                    username: undefined,
                    password: undefined,
                },
                user: {
                    username: undefined,
                    password: undefined,
                    againPassword: undefined,
                    name: undefined,
                    mobile: undefined,
                    company: undefined
                },
                isLogin: true,
                rules_login: {
                    username: [
                        {required: true, message: '请输入帐号', trigger: 'blur'},
                        {min: 6, max: 24, message: '帐号长度必须是6-24个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 24, message: '密码长度必须是6-24个字符', trigger: 'blur'}
                    ],
                },
                rules: {
                    register_username: [
                        {required: true, message: '请输入帐号', trigger: 'blur'},
                        {min: 1, max: 24, message: '帐号长度必须是6-24个字符', trigger: 'blur'}
                    ],
                    register_password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 24, message: '密码长度必须是6-24个字符', trigger: 'blur'}
                    ],
                    againPassword: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 1, max: 24, message: '用户名长度必须是1-24个字符', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号长度必须是11位', trigger: 'blur'}
                    ],
                    company: [
                        {required: true, message: '请输入学校名称', trigger: 'blur'},
                        {min: 1, max: 24, message: '学校长度必须是1-24个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            changeRegister(formName) {
                console.log('formName', formName);
                this.$refs[formName].resetFields();
                const{ isLogin } = this;
                this.isLogin = !isLogin;
            },
            loginUser(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$axios.post("/api/v1/login", this.admin
                        ).then(result => {
                            return result.data;
                        })
                            .then(data => {
                                if(data.code === 0){
                                    this.jsondata= data;
                                    this.$message({
                                        message: '登陆成功',
                                        type: 'success'
                                    });
                                    //存储token
                                    localStorage.setItem('eleToken',data.data);
                                    //解析token
                                    const decoded=jwt_decode(data.data);
                                    //存储到vuex中
                                    this.$store.dispatch("setAuthenticated",!this.isEmpty(decoded));
                                    this.$store.dispatch("setUser",decoded);
                                    // 跳转页面
                                    this.$router.push({
                                        path: '/index'
                                    })
                                }
                                else{
                                    this.resetForm(this.jsondata.data);
                                    this.$message.error('密码错误');
                                }
                            })
                    }  else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            registerUser(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        // 注册普通用户
                        this.$axios.post("/api/v1/register", this.admin)
                            .then(res => res.data)
                            .then(data => {
                                if (data.code === 0) {
                                    this.$message({
                                        message: '注册成功！',
                                        type: 'success'
                                    });
                                    this.changeRegister('register_user');
                                }  else {
                                    this.$message({
                                        message: '账户名已存在！',
                                        type: 'error'
                                    });
                                }
                            })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .login{
        text-align: center;
    }
</style>
